<template>
<div class="title-block">
  <div class="title-block-title">警情推送</div>
  <div class="title-block-content message">
    <xdh-list :data="data">
      <template slot-scope="scope">
        <xdh-image-text style="width:100%;">
          <xdh-avatar slot="image">H</xdh-avatar>
          <template slot="text">
            <div class="content">
              <xdh-ellipsis :tooltip="true" :lines="4">
                {{scope.item.description}}
              </xdh-ellipsis>
            </div>
            <div class="time">{{scope.item.time}}</div>
          </template>
        </xdh-image-text>
      </template>
    </xdh-list> 
  </div>
</div>
</template>

<style lang="scss" scoped>
@import "../../style/variables/_default.scss";
.message{
  .time{
    color: $--color-info;
    text-align: right;
  }
}
</style>

<script>
import XdhList from '@/widgets/xdh-list'
import XdhAvatar from '@/widgets/xdh-avatar'
import XdhImageText from '@/widgets/xdh-image-text'
import XdhEllipsis from '@/widgets/xdh-ellipsis'
export default {
  name: 'relationMessage',
  components: {
    XdhList,
    XdhAvatar,
    XdhImageText,
    XdhEllipsis
  },
  props: {
  },
  data() {
    return {
      data: [
        {
          title: 'Title 1',
          description: '内容描述 this is description.this is description.this is description.this is description，内容描述 this is description.this is description.this is description.this is description内容描述 this is description.this is description.this is description.this is description内容描述 this is description.this is description.this is description.this is description内容描述 this is description.this is description.this is description.this is description内容描述 this is description.this is description.this is description.this is description内容描述 this is description.this is description.this is description.this is description',
          time: '三天前'
        },
        {
          title: 'Title 2',
          description: '内容描述 this is description.this is description.this is description.this is description',
          time: '三天前'
        },
        {
          title: 'Title 3',
          description: '内容描述 this is description.this is description.this is description.this is description',
          time: '三天前'
        }
      ]
    }
  },
  watch: {
    
  },
  methods: {
  },
  mounted() {
  }
}
</script>

